<!-- 财务管理舱 -->

<template>
    <div class="mcMainIndexStyle">
        <div class="main">
            <div class="content">
                <div class="treeContent" :class="dir == 'left' ? 'leftArrow' : 'rightArrow'">
                    <div class="searchUser" v-if="showSearch" @mouseleave="showSearch = false">
                        <searchUser ref="searchUser" @handleCurrentChange="searchChange"></searchUser>
                    </div>
                    <div>
                        <el-input
                            placeholder="请输入帐号"
                            v-model="deviceName"
                            class="input-with-select"
                            maxlength="20"
                            @input="deviceKeyUp"
                        >
                            <!-- <el-button
                                slot="append"
                                icon="el-icon-close"
                                @click="clearSearch"
                                style="border-right: 1px solid #dcdfe6; width: 30px; text-align: center; display: inline-block; padding: 0"
                            ></el-button>
                            <el-button
                                slot="append"
                                icon="el-icon-search"
                                @click="searchDevice"
                                style="width: 40px; text-align: center; display: inline-block; padding-left: 18px"
                            ></el-button> -->
                        </el-input>
                        <buildTree
                            :height="secondTableHeight"
                            @handleCurrentChange="handleCurrentChange"
                            name="建筑列表"
                            @dataLoad="treeLoad"
                            @allData="getAllData"
                        ></buildTree>
                    </div>
                </div>

                <div
                    style="margin-top: 0"
                    class="rightContent"
                    :class="dir == 'left' ? 'leftTable' : 'rightTable'"
                    @mouseover="showSearch = false"
                >
                    <!-- 用能详情未点到房间了 -->
                    <div v-if="typeButton == '1' && !isHasFloor">
                        <deviceFloor :floorList="floorList" :currentNodeId="currentNodeId" :currentNodeName="currentNodeName" :dir="dir">
                        </deviceFloor>
                    </div>
                    <!-- 设备实时 主界面 -->
                    <div v-else-if="typeButton == '2' && !isHasFloor">
                        <div class="listCount">
                            <div class="one">
                                <div class="item">
                                    <div class="leftItem" :class="countType == 1 ? 'hover' : ''" @click="countClick(1)">
                                        <!-- <img src="@/assets/images/monitor/sbzs.png" /> -->
                                        <iconBorder
                                            outWidth="50px"
                                            inWidth="28px"
                                            marginTop="11px"
                                            bgColor="#D8E7FC"
                                            imgSrc="monitor/accountCount.png"
                                            :isCenter="false"
                                        ></iconBorder>
                                        <div style="margin-left: 4px">
                                            <label>账户总数</label>
                                            <span>
                                                <b>{{ topData.total_ac_count }}</b>
                                                户
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="leftItem" :class="countType == 2 ? 'hover' : ''" @click="countClick(2)">
                                        <iconBorder
                                            outWidth="50px"
                                            inWidth="28px"
                                            marginTop="11px"
                                            bgColor="#D8E7FC"
                                            imgSrc="monitor/elecCount.png"
                                            :isCenter="false"
                                        ></iconBorder>
                                        <div style="margin-left: 4px">
                                            <label>电表总数</label>
                                            <span>
                                                <b>{{ topData.count_01 }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="leftItem" :class="countType == 3 ? 'hover' : ''" @click="countClick(3)">
                                        <iconBorder
                                            outWidth="50px"
                                            inWidth="28px"
                                            marginTop="11px"
                                            bgColor="#D8E7FC"
                                            imgSrc="monitor/waterCount.png"
                                            :isCenter="false"
                                        ></iconBorder>
                                        <div style="margin-left: 4px">
                                            <label>水表总数</label>
                                            <span>
                                                <b>{{ topData.count_02 }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="two">
                                <div class="item">
                                    <div class="rightItem" :class="countType == 5 ? 'hover' : ''" @click="countAllClick('1')">
                                        <div class="itemTop"><label class="circle c_zx"></label>总在线</div>
                                        <div class="itemBottom">
                                            <span>
                                                <b>{{ topData.is_online }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="rightItem" :class="countType == 6 ? 'hover' : ''" @click="countAllClick('2')">
                                        <div class="itemTop">
                                            <label class="circle c_lx"></label>
                                            总离线
                                        </div>
                                        <div class="itemBottom">
                                            <span>
                                                <b>{{ topData.offline_device }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="rightItem" :class="countType == 7 ? 'hover' : ''" @click="countAllClick('3')">
                                        <div class="itemTop">
                                            <label class="circle c_gj"></label>
                                            分闸数
                                        </div>
                                        <div class="itemBottom">
                                            <span>
                                                <b>{{ topData.close_state }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="rightItem" :class="countType == 8 ? 'hover' : ''" @click="countAllClick('4')">
                                        <div class="itemTop">
                                            <label class="circle c_qf"></label>
                                            总欠费
                                        </div>
                                        <div class="itemBottom">
                                            <span>
                                                <b>{{ topData.alarm_overdue }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="listLine"></div>
                        </div>
                        <div class="roomContent">
                            <deviceListItem
                                type="1"
                                @currentClick="currentClick"
                                @gotoDetail="gotoDetail"
                                @pageChange="pageChange"
                                :name="currentNodeName"
                                :data="data"
                                :listTreeData="listTreeData"
                                :currentNodeName="currentNodeName"
                                :sbxq="sbxq"
                                ref="deviceListItem"
                                @handleSizeChange="handleSizeChange"
                                @refreshData="refreshData"
                            ></deviceListItem>
                        </div>
                    </div>
                    <!-- 用能详情点到房间了 -->
                    <energyAnalysis v-else-if="isHasFloor" :deviceInfo="deviceInfo" @back="back" @showSpin="showSpin"></energyAnalysis>
                    <div v-else></div>
                </div>

                <deviceTree
                    v-if="currentPage == 'top'"
                    @back="back"
                    :type="deviceType"
                    :currentNodeId="currentNodeId"
                    :currentNodeName="currentNodeName"
                ></deviceTree>
            </div>
            <Spin size="large" fix v-if="spinShow" class="demo-spin">
                <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
                <div>数据加载中...</div>
            </Spin>
            <arrowLeft @arrowChange="arrowChange"></arrowLeft>
        </div>
    </div>
</template>

<script>
// import {Splitpanes, Pane} from "splitpanes"
// import "splitpanes/dist/splitpanes.css"
import Dbzs from '@/assets/images/monitor/dbzs.png'
import Sbzs from '@/assets/images/monitor/sbzs.png'
import Sbzs1 from '@/assets/images/monitor/sbzs1.png'
import Wgzs from '@/assets/images/monitor/wgzs.png'
import {LeftTree, listData} from '@/mockData/monitorCenter.js'
// import {PopupCommon} from "@/libs/popupCommon"
import ElectricityMeter from '../electricityMeter.vue'
import energyAnalysis from '../energyAnalysis.vue'
import WaterMeter from '../waterMeter.vue'
// import GatewayMeter from "./gatewayMeter.vue"
import arrowLeft from '@/components/customComponents/arrowLeft'
import iconBorder from '@/components/newIndex/iconBorder'
import zhaoming from '@/components/newIndex/zhaoming.vue'
import {Utility} from '@/libs/utility.js'
import deviceFloor from '../components/deviceFloor'
import deviceListItem from '../components/deviceListItemJsc'
// import deviceListItem from "@/components/newIndex/deviceListItem"
import buildTree from '@/components/customComponents/managementCenter/buildAllTree'
import deviceTree from '../components/deviceTree'
import {AjaxCommon} from '@/libs/apiCommon'
import searchUser from './searchUser'
export default {
    components: {
        // Splitpanes,
        // Pane,
        ElectricityMeter,
        WaterMeter,
        // GatewayMeter,
        arrowLeft,
        deviceTree,
        deviceListItem,
        deviceFloor,
        iconBorder,
        zhaoming,
        energyAnalysis,
        buildTree,
        searchUser
    },
    data() {
        return {
            first: true,
            topData: {},
            showSearch: false,
            pageSizes: [],
            countType: '1',
            deviceCount: [],
            spinShow: true,
            buildInfo: {},
            // 用能详情1 或 设备实时2
            typeButton: '2',
            // 是否含有楼层
            isHasFloor: false,
            secondTableHeight: document.body.clientHeight - 190,
            currentNodeId: 1,
            currentNodeName: '',
            deviceType: '1',
            dir: 'left',
            deviceName: '',
            /** 当前页面  index 首页，elec电表，water水表*/
            currentPage: 'index',
            hasIsSizes: true,
            count: listData.filter((t) => t.type != 3).length,
            size: 20,
            current: 1,
            listData: listData.filter((t) => t.type != 3),
            listTreeData: [],
            DbzsImg: Dbzs,
            SbzsImg: Sbzs,
            Sbzs1Img: Sbzs1,
            WgzsImg: Wgzs,
            data: LeftTree,
            // 楼层详情
            floorList: [],
            // 房间详情
            roomList: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            sbxq: {
                总告警数: 0,
                一般告警数: 0,
                紧急告警数: 0,
                重要告警数: 0,
                设备数: 0,
                在线: 0,
                离线: 0,
                告警: 0,
                欠费: 0,
                分闸数: 0,
                零能耗数: 0,
                总数: 0
            },
            /** 查询需要的设备信息 */
            deviceitem: {
                /** 建筑id */
                build_id: '',
                /** DB电表，SB水表，QB气表  默认全部为： DB,SB,QB */
                eq_type: 'DB,SB,QB',
                /** 设备名称 */
                eq_name: '',
                /** 设备类型： 0 所有；1、在线设备；2、离线设备；3、零能耗设备；4、关停设备 */
                typeid: 0
            },
            deviceInfo: {},
            // 左侧树的数据（第一层）
            leftTreeData: [],
            searchUser: {}
        }
    },
    mounted() {
        this.$nextTick(() => {
            const list = Utility.arrayFlat(LeftTree, (t) => t.children)
            this.listTreeData = list
            this.roomList = list.filter((t) => t.id == '999')
            this.getHeight()

            /*窗口自适应，关键代码*/
            window.onresize = () => {
                this.getHeight()
                Utility.debounce(() => this.reGetData(), 500, parseInt(Math.random() * 1000000))
            }
        })
    },
    destroyed() {},
    methods: {
        showSpin(isTrue) {
            this.spinShow = isTrue
        },
        treeLoad() {
            this.btnChange('2')
            this.spinShow = false
        },
        deviceKeyUp(e) {
            this.showSearch = true
            setTimeout(() => {
                this.$refs.searchUser.initPage(e)
            })
        },
        searchChange(item) {
            this.searchUser = JSON.parse(item)
            this.showSearch = false
            // 调用右侧接口
            this.GetDateDivce(this.deviceitem.build_id, this.searchUser.ac_id, 1)
        },
        reGetData() {
            if (this.typeButton == '2') {
                this.GetDateDivce(this.deviceitem.build_id, '', 1)
            }
        },
        getPageSizes() {
            const curWidth = document.body.clientWidth
            let curHeight = 0
            let countValue = 20
            curHeight = document.querySelector('.gjw-list-list')?.clientHeight
            if (curHeight) {
                // 每个110px
                const heightCount = parseInt(curHeight / 144)
                let widthCount = 4
                if (curWidth <= 1450) {
                    widthCount = 4
                } else if (curWidth > 1450 && curWidth < 1910) {
                    widthCount = 5
                } else {
                    widthCount = 6
                }
                countValue = widthCount * heightCount
                this.size = countValue
                this.pageSizes = [countValue, countValue * 2, countValue * 3, countValue * 4, countValue * 5]
            }
        },
        getAllData(d) {
            if (d) {
                this.leftTreeData = JSON.parse(d)
                this.currentNodeName = JSON.parse(d)[0].title
                this.currentNodeId = JSON.parse(d)[0].id
            }
        },
        clearSearch() {
            this.deviceName = ''
            this.searchDevice()
        },
        async searchDevice() {
            const deviceName = this.deviceName
            this.deviceitem.eq_name = deviceName
            // await this.GetDivceCount(this.deviceitem.build_id, this.deviceitem.eq_type, this.deviceitem.eq_name, this.deviceitem.typeid)
            this.GetDateDivce(this.deviceitem.build_id, '', 1)
        },
        /** 获取设备总数 */
        async GetEqCount() {
            const data = await AjaxCommon(`api/Eq/GetEqCount`, 'get', null)
            const newData = data.data.Message
            this.deviceCount = newData
        },
        /**
         * 获取设备数量
         * @param build_id
         * @param eq_type DB电表，SB水表，QB气表
         * @param eq_name
         * @param typeid 0 所有；1、在线设备；2、离线设备；3、零能耗设备；4、关停设备
         */
        async GetDivceCount(build_id, eq_type, eq_name, typeid) {
            // const params = `/api/Eq/GetDivceCount?build_id=${build_id}&eq_type=${eq_type}&eq_name=${eq_name}&typeid=${typeid}&PageSize=1000&PageIndex=1`
            // const data = await AjaxCommon(params, 'get', null)
            // const newData = data?.data?.Message ?? {}
            // //  返回数据为total 设备总数 is_online在线数 close_state分闸数 zero_energy 零能耗数 offline_device 离线数 alarm_overdue 欠费数量 alarm_sb 设备告警数
            // this.sbxq = {
            //     ...this.sbxq,
            //     设备数: this.deviceCount?.[3]?.count ?? 0,
            //     总数: newData.total,
            //     在线: newData?.is_online ?? 0,
            //     离线: newData?.offline_device ?? 0,
            //     告警: newData?.alarm_sb ?? 0,
            //     欠费: newData?.alarm_overdue ?? 0,
            //     分闸数: newData?.close_state ?? 0,
            //     零能耗数: newData?.zero_energy ?? 0
            // }
        },

        /**
         * 获取所有设备数量
         * @param build_id
         * @param eq_type DB电表，SB水表，QB气表
         * @param typeid 0 所有；1、在线设备；2、离线设备；3、零能耗设备；4、关停设备
         */
        async GetAllDivceCount(build_id, eq_type, typeid) {
            // // const params = `/api/Eq/GetDivceCount?build_id=${build_id}&eq_type=${eq_type}&eq_name=&typeid=${typeid}&PageSize=1000&PageIndex=1`
            // // const data = await AjaxCommon(params, 'get', null)
            // // const newData = data?.data?.Message ?? {}
            // const newData = {}
            // //  返回数据为total 设备总数 is_online在线数 close_state分闸数 zero_energy 零能耗数 offline_device 离线数 alarm_overdue 欠费数量 alarm_sb 设备告警数
            // this.sbxq = {
            //     设备数: this.deviceCount?.[3]?.count ?? 0,
            //     总数: newData.total,
            //     在线: newData?.is_online ?? 0,
            //     离线: newData?.offline_device ?? 0,
            //     告警: newData?.alarm_sb ?? 0,
            //     欠费: newData?.alarm_overdue ?? 0,
            //     分闸数: newData?.close_state ?? 0,
            //     零能耗数: newData?.zero_energy ?? 0,
            //     总在线: newData?.is_online ?? 0,
            //     总离线: newData?.offline_device ?? 0,
            //     总告警: newData?.alarm_sb ?? 0,
            //     总欠费: newData?.alarm_overdue ?? 0
            // }
        },

        /**
         * 通过建筑树查找设备
         * @param build_id 建筑id
         * @param ac_id 账户ID
         * @param PageIndex
         */
        async GetDateDivce(build_id, ac_id, PageIndex, changeSize = true) {
            if (build_id) {
                AjaxCommon(`/api/Account/GetPayCount?ac_id=${ac_id}&bd_guid=${build_id}`, 'get', null).then((res) => {
                    const data = res.data.Message

                    if (this.first) {
                        this.topData = data
                        this.first = false
                        this.sbxq = data
                    } else {
                        console.log(res)
                        this.sbxq = data
                    }
                })
            }
            if (changeSize) {
                this.getPageSizes()
            }
            // api/Account/GetPaymentAC?ac_id={ac_id}&bd_guid={bd_guid}&pageIndex={pageIndex}&pageSize={pageSize}
            this.spinShow = true
            // ${this.size}
            const p = `/api/Account/GetPaymentAC?bd_guid=${build_id}&ac_id=${ac_id}&pageSize=${this.size}&pageIndex=${PageIndex}`
            const data = await AjaxCommon(p, 'get', null)
            let newData = data?.data?.Message?.rows ?? []
            //    switch_state分合闸状态（0：合闸 1：分闸）
            //    is_online当前在线（0：在线 1：离线）
            //     diff_value 当前用量
            //     online_time最近采集时间
            //     END_VALUE最近一次表计读数 RATE 倍率 总用量=END_VALUE*RATE
            //     is_overdue 是否欠费
            //     is_alarm 是否告警
            //     IS_OPEN 是否开户 (0否 1是)
            const total = data?.data?.Message?.total ?? 0

            this.$refs.deviceListItem?.setPageAndData(PageIndex, parseInt(total), newData, this.pageSizes)
            // this.data = newData

            setTimeout(() => {
                this.spinShow = false
            }, 200)
        },
        // GetDateDivce  通过建筑树查找设备
        async handleCurrentChange(d) {
            const self = this
            self.buildInfo = d
            self.deviceInfo = d
            self.deviceitem.build_id = d.id
            this.isHasFloor = d.type != 'bd'
            this.currentNodeId = d.id
            this.currentNodeName = d.text
            if (d.type == 'bd') {
                this.GetDateDivce(d.id, '', 1)
            }
        },
        getHeight() {
            this.secondTableHeight = document.body.clientHeight - 190
        },
        async btnChange(type) {
            this.typeButton = type

            // 设备实时 获取设备信息
            if (type == '2') {
                this.isHasFloor = false
                try {
                    // document.getElementsByClassName('ivu-tree')[0].children[0].children[0].children[1].click()
                    const id = this.leftTreeData?.[0]?.id
                    // this.GetAllDivceCount(id, 'DB,SB,QB', 0)
                    this.GetDateDivce(id, '', 1)
                } catch (error) {}
                // this.GetEqCount()
                // this.GetDivceCount('', '', '', 0)
                // this.GetDateDivce('', 'DB,SB,QB', '', 0, 1)
            }
        },
        nodeClick(node) {
            this.isHasFloor = node.type == 'room'
            this.currentNodeId = node.id
            // 显示两级
            var item = this.listTreeData.find((t) => t.id == node.parentId)
            if (item) {
                this.currentNodeName = item.label + '   -   ' + node.label
            } else {
                this.currentNodeName = node.label
            }
            if (node.type == 'room') {
                this.currentNodeName = node.label
            }
        },
        checkNode(checkedNodes, checkedKeys) {
            if (checkedKeys.checkedKeys.length == 0) {
                this.isHasFloor = false
                this.roomList = []
                this.floorList = []
            } else {
                // 如果含有房间
                let hasRoom = checkedKeys.checkedNodes.filter((t) => t.type == 'room')
                // 含有楼层
                let hasFloor = checkedKeys.checkedNodes.filter((t) => t.type == 'floor')
                if (hasRoom.length > 0) {
                    this.roomList = hasRoom
                    this.isHasFloor = false
                    this.floorList = []
                } else if (hasFloor.length > 0) {
                    this.isHasFloor = true
                    this.roomList = []
                    this.floorList = hasFloor
                } else {
                    this.isHasFloor = false
                    this.roomList = []
                    this.floorList = []
                }
            }
        },
        arrowChange(e) {
            this.dir = e
        },
        /** 查看详情 */
        gotoDetail(item) {
            this.deviceInfo = item
            this.isHasFloor = true
        },
        back(e) {
            // this.currentPage = 'index'
            this.isHasFloor = false
            this.GetDateDivce(this.deviceitem.build_id, '', 1)
        },
        /** 选中的左侧树节点后，点击在线设备等 */
        currentClick(type) {
            console.log(type)
        },
        /** 总设备在线等点击*/
        countAllClick(type) {
            this.deviceitem.typeid = parseInt(type)
            this.countType = parseInt(type) + 4
            this.GetDateDivce(this.deviceitem.build_id, '', 1)
            //  0 所有；1、在线设备；2、离线设备；3、零能耗设备；4、关停设备
        },
        countClick(type) {
            this.countType = type
            this.current = 1
            // DB电表，SB水表，QB气表  默认全部为： DB,SB,QB
            if (type == 1) {
                this.deviceitem.eq_type = 'DB,SB,QB'
                // 设备总数
            }
            if (type == 2) {
                this.deviceitem.eq_type = 'DB'
            }
            if (type == 3) {
                this.deviceitem.eq_type = 'SB'
            }
            if (type == 4) {
                this.deviceitem.eq_type = 'QB'
            }
            this.GetDateDivce(this.deviceitem.build_id, '', this.current)
        },
        getImg(type) {
            return type == 1
                ? require('@/assets/images/monitor/db.png')
                : type == 2
                ? require('@/assets/images/monitor/sb.png')
                : require('@/assets/images/data/wifiWhite.png')
        },
        getHeaderClass(level) {
            return level == 1 ? 'normal' : level == 2 ? 'lx' : 'gj'
        },
        getBottomClass(type, level) {
            if (type == 1 && level == 1) {
                return 'dbzc'
            } else if (type == 2 && level == 1) {
                return 'sbzc'
            } else {
                return 'yc'
            }
        },
        getLevelImg(level) {
            return level == 1
                ? require('@/assets/images/monitor/warn1.png')
                : level == 2
                ? require('@/assets/images/monitor/warn2.png')
                : require('@/assets/images/monitor/warn3.png')
        },
        showDetail(item) {
            console.log(item)
        },
        // 分页点击事件
        pageChange(p) {
            this.GetDateDivce(this.deviceitem.build_id, '', p, false)
        },
        // 页码点击事件,p当前页
        handleSizeChange(e) {
            this.size = e
            this.current = 1
            this.GetDateDivce(this.deviceitem.build_id, '', 1, false)
        },
        refreshData() {
            this.GetDateDivce(this.deviceitem.build_id, '', this.current, false)
        }
    }
}
</script>

<style lang="scss" scoped>
.demo-spin {
    background-color: rgba(0, 0, 0, 0.2);
}
.demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.mcMainIndexStyle {
    width: 100%;
    height: 100%;
    .left {
        left: 230px !important;
    }

    .input-with-select {
        width: 100%;
    }

    .custom-tree-node {
        width: 100%;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    .main {
        height: 100%;
        width: 100%;
        position: relative;
    }

    .main .content {
        padding: 0;
        // background-color: #fff;
        display: flex;
        width: 100%;
        height: 100%;

        .rightContent {
            background-color: #fff;
            height: 100%;
            flex: 1;
            text-align: left;
            > div {
                height: 100%;
                width: 100%;
            }
        }
    }

    .leftArrow {
        width: 250px !important;
    }

    .rightArrow {
        width: 0 !important;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
    }

    .leftTable {
        max-width: calc(100% - 260px);
    }

    .rightTable {
        max-width: calc(100% - 0px);
    }

    .treeContent {
        height: 100%;
        padding: 10px;
        transition: transform 0.3s;
        width: 250px;
        background-color: #fff;
        margin-right: 10px;
        position: relative;
        .searchUser {
            position: absolute;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
            background-color: #fff;
            padding: 10px;
            top: 88px;
            left: 11px;
            z-index: 2;
            height: 420px;
            width: 600px;
        }
    }

    .treeMain {
        height: calc(100% - 84px);
        overflow: auto;
        margin-top: 10px;
        font-size: 14px;
    }

    @media screen and (max-width: 1440px) {
        .leftItem {
            img {
                width: 36px !important;
                height: 36px !important;
                margin-top: 0px !important;
                margin-bottom: 0px !important;
                margin-left: 4px !important;
                margin-right: 4px !important;
            }
            div {
                label {
                    font-size: 13px !important;
                }
                span {
                    font-size: 13px !important;
                    b {
                        font-size: 14px !important;
                    }
                }
            }
        }
        .rightItem {
            .itemTop {
                font-size: 13px !important;
            }
            .itemBottom {
                span {
                    font-size: 13px !important;
                    b {
                        font-size: 14px !important;
                    }
                }
            }
        }
    }

    @media screen and (min-width: 1440px) {
        .leftItem {
            img {
                width: 50px !important;
                height: 50px !important;
                margin-top: 0px !important;
                margin-bottom: 0px !important;
                margin-left: 4px !important;
                margin-right: 4px !important;
            }
            div {
                label {
                    font-size: 13px !important;
                }
                span {
                    font-size: 13px !important;
                    b {
                        font-size: 14px !important;
                    }
                }
            }
        }
        .rightItem {
            .itemTop {
                font-size: 13px !important;
            }
            .itemBottom {
                span {
                    font-size: 13px !important;
                    b {
                        font-size: 14px !important;
                    }
                }
            }
        }
    }

    @media screen and (min-width: 1910px) {
        .leftItem {
            img {
                width: 50px !important;
                height: 50px !important;
                margin-top: 0px !important;
                margin-bottom: 0px !important;
                margin-left: 10px !important;
                margin-right: 10px !important;
            }
            div {
                label {
                    font-size: 14px !important;
                }
                span {
                    font-size: 14px !important;
                    b {
                        font-size: 20px !important;
                    }
                }
            }
        }
        .rightItem {
            .itemTop {
                font-size: 14px !important;
            }
            .itemBottom {
                span {
                    font-size: 14px !important;
                    b {
                        font-size: 20px !important;
                    }
                }
            }
        }
    }

    .listCount {
        height: 70px;
        border: 1px solid #eeeef0;
        position: relative;
        background-color: #f5f9fc;
        border-radius: 4px;
        display: flex;
        gap: 4px;
        width: 100%;
        .item {
            width: calc((100% - 0px) / 3);
            height: 70px;
            display: flex;
        }
        .one {
            width: 55%;
            height: 70px;
            display: flex;
        }
        .two {
            width: 45%;
            height: 70px;
            display: flex;
        }
    }

    .listCountLeft {
        width: 50%;
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .listCountRight {
        width: 50%;
        float: left;
    }

    .listLine {
        width: 2px;
        height: 45px;
        background-color: #eeeef0;
        position: absolute;
        top: 12.5px;
        left: 54.95%;
    }

    .leftItem {
        text-align: center;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        cursor: pointer;
    }
    .leftItem:hover {
        background-color: rgba(213, 232, 252, 0.4);
    }
    .rightItem:hover {
        background-color: rgba(213, 232, 252, 0.4);
    }
    .hover {
        // background-color: #d5e8fc;
        // background-color: rgba(213, 232, 252, 0.4);
    }

    .leftItem img {
        width: 50px;
        height: 50px;
        margin: 0 10px;
    }

    .leftItem div {
        display: inline-block;
        line-height: 30px;
        text-align: left;
        cursor: pointer;
    }

    .leftItem div label {
        font-size: 14px;
        display: block;
        cursor: pointer;
    }

    .leftItem div span {
        font-size: 14px;
        color: #757e8b;
    }

    .leftItem div span b {
        font-size: 20px;
        margin-right: 10px;
        color: #333;
    }

    .rightItem {
        width: 100%;
        text-align: center;
        cursor: pointer;
        .circle {
            width: 10px;
            height: 10px;
            border-radius: 10px;
            display: inline-block;
        }
        .c_zx {
            background-color: #5b95eb;
        }
        .c_lx {
            background-color: #555a6b;
        }
        .c_gj {
            background-color: #af4531;
        }
        .c_qf {
            background-color: #d69639;
        }
    }

    .rightItem .itemTop {
        font-size: 14px;
        line-height: 35px;
        cursor: pointer;
    }

    .rightItem .itemTop label {
        font-size: 12px;
        width: 10px;
        display: inline-block;
        height: 10px;
        border-radius: 8px;
        margin-right: 10px;
        cursor: pointer;
    }

    .green {
        background-color: #01b77a;
    }

    .gray {
        background-color: #707070;
    }

    .red {
        background-color: #e60000;
    }

    .orange {
        background-color: #ff9900;
    }

    .rightItem .itemBottom {
        margin-top: 0;
    }

    .rightItem .itemBottom span {
        font-size: 14px;
        color: #757e8b;
    }

    .rightItem .itemBottom span b {
        font-size: 20px;
        margin-right: 10px;
        color: #333;
    }

    .selectValue {
        display: flex;
        height: 50px;
        background: #f7f8fc;
        margin-top: 15px;
        border-radius: 4px;
        line-height: 50px;
    }

    .selectValue .value {
        margin-left: 20px;
        font-size: 16px;
    }

    .selectValue .rightValue {
        flex: 1;
        text-align: right;
        margin-right: 20px;
    }

    .selectValue .rightValue span {
        font-size: 16px;
        color: #666;
    }

    .selectValue .rightValue span b {
        font-size: 16px;
        color: #333;
    }

    .selectValue .rightValue span label {
        width: 10px;
        display: inline-block;
        height: 10px;
        border-radius: 10px;
        margin-left: 40px;
        margin-right: 5px;
    }

    .roomContent {
        height: calc(100vh - 230px);
        overflow-y: auto;
    }

    .gjw-list {
        /* height: calc(100vh - 168px); */
        background: #fff;
        margin-top: 10px;
        /* padding: 10px; */
    }

    .gjw-list .gjw-list-list {
        max-height: 220px;
        overflow-y: auto;
        padding-top: 0px;
        margin-bottom: 10px;
    }

    .gjw-list .gjw-list-list .gjw-list-item {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-left: 10px;
        padding-top: 3px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item {
        margin-right: 10px;
        width: calc((100% - 60px) / 6);
        height: 100px;
        border-radius: 4px;
        background: #fff;
        margin-bottom: 10px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
        position: relative;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header {
        font-size: 12px;
        height: 35px;
        line-height: 35px;
        background-color: #55cca4;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        color: #fff;
        overflow: hidden;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .db {
        background-color: #55cca4;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .sb {
        background-color: #6caae5;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header img {
        float: left;
        margin: 10px 6px 0 10px;
        width: 16px;
        height: 16px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header label {
        font-size: 14px;
        float: left;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList {
        float: right;
        height: 35px;
        text-align: right;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .warn {
        float: right;
        margin-right: -10px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .level {
        font-size: 12px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .qf {
        float: right;
        width: 10px;
        margin-right: 24px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .status {
        width: 8px;
        height: 8px;
        display: block;
        border-radius: 8px;
        float: right;
        margin-right: 10px;
        margin-top: 14px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .normal {
        background-color: #00ffa9;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .lx {
        background-color: #77dbb9;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .gj {
        background-color: #00ffa9;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom {
        background-color: #e2f7f0;
        height: 65px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .dbzc {
        background-color: #e2f7f0 !important;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .sbzc {
        background-color: #e9f6fe !important;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .yc {
        background-color: #f4f4f4 !important;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue {
        font-size: 14px;
        color: #666;
        padding-top: 13px;
        padding-bottom: 3px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue label {
        margin-left: 10px;
        margin-right: 10px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue span {
        font-size: 14px;
        color: #333;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue {
        font-size: 14px;
        color: #666;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue label {
        margin-left: 10px;
        margin-right: 10px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue span {
        font-size: 14px;
        color: #333;
    }

    .gjw-list .gjw-list-page {
        height: 40px;
        padding-top: 10px;
        text-align: right;
    }

    .cursor {
        cursor: pointer;
    }
}
</style>
